<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Registration</title>

    <!-- CSS -->
    <link rel="stylesheet" th:href="@{assets/material/material.blue_grey-blue.min.css}">
    <link rel="stylesheet" th:href="@{assets/material/material.icons.css}">
    <link rel="stylesheet" th:href="@{assets/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/register.css}">

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" th:href="@{assets/ico/favicon.ico}">
</head>

<body>
<div class="mdl-layout mdl-js-layout">
    <div class="register-container">
        <div class="register-form" th:if="${error == null && success == null}">
            <div class="register-form-title">
                <label>Sign up</label>
                <span>Please fill in this form to create your account</span>
            </div>

            <div class="register-error-info" th:switch="${warning}" th:if="${warning}">
                <p style="margin: 0;" th:case="invalid_password_value">Invalid password value. It does not comply with the password policy.</p>
                <p style="margin: 0;" th:case="invalid_user_information">Invalid first name, last name or username.</p>
                <p style="margin: 0;" th:case="invalid_email">Invalid email address.</p>
                <p style="margin: 0;" th:case="*">Some information are missing or invalid.</p>
            </div>

            <form role="form" th:action="@{register}" method="post">
                <div class="register-form-content">
                    <div style="display: flex; flex-direction: row">
                        <div class="input-textfield" style="margin-right: 20px;">
                            <label for="firstName">First name</label>
                            <input type="text" id="firstName" name="firstName" required/>
                        </div>
                        <div class="input-textfield">
                            <label for="lastName">Last name</label>
                            <input type="text" id="lastName" name="lastName" required/>
                        </div>
                    </div>

                    <div style="display: flex; flex-direction: column">
                        <div class="input-textfield">
                            <label for="username">Username</label>
                            <input type="text" id="username" name="username" required/>
                        </div>
                        <div class="input-textfield">
                            <label for="email">Email address</label>
                            <input type="email" id="email" name="email" required/>
                        </div>
                    </div>

                    <div class="input-textfield">
                        <label for="password">Password</label>
                        <i id="changePasswordVisibility" class="mdl-textfield__icon material-icons" style="position: absolute; margin-top: 27px; margin-left: 5px;">visibility</i>
                        <input type="password" id="password" name="password" required style="padding-left: 30px;"/>
                    </div>
                </div>

                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                <input type="hidden" th:name="client_id" th:value="${param.client_id}"/>
                <div style="display: flex; flex-direction: row;">
                    <a th:href="@{login(client_id=${param.client_id})}"><< Back to login</a>
                    <span style="display: flex; flex: 1;"></span>
                    <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Create account</button>
                </div>
            </form>
        </div>

        <div th:if="${success}" class="register-form">
            <div class="register-form-title">
                <label>Registration confirmation</label>
                <p>Thanks for creating your account. Go back to your application to <a th:href="@{login(client_id=${param.client_id})}">login</a></p>
            </div>
        </div>

        <div th:if="${error}" class="register-form">
            <div class="register-form-title">
                <label>Registration error</label>
                <p>Please go back to your client application and try again, or contact the owner and ask for support</p>
            </div>
            <div class="register-error-info">
                Error description : <span th:text="${error}" class="error"></span>
            </div>
        </div>
    </div>
</div>

<!--[if lt IE 10]>
<script th:src="@{assets/js/placeholder.js}"></script>
<![endif]-->
<script th:src="@{assets/material/material.min.js}"></script>
<script th:src="@{assets/js/jquery-3.5.1.min.js}"></script>
<script>
    $(".mdl-textfield__input").focus(function (){
        if( !this.value ){
            $(this).prop('required', true);
            $(this).parent().addClass('is-invalid');
        }
    });
    $(".mdl-button[type='submit']").click(function (event){
        $(this).siblings(".mdl-textfield").addClass('is-invalid');
        $(this).siblings(".mdl-textfield").children(".mdl-textfield__input").prop('required', true);
    });
    $("#changePasswordVisibility").click(function() {
        var inputType = $('input#password').attr('type');
        if (inputType === 'text') {
            $('input#password').prop('type', 'password');
            $(this).text('visibility');
        } else {
            $('input#password').prop('type', 'text');
            $(this).text('visibility_off');
        }
    });
</script>
</body>
</html>
